

<template>
  <!-- 加载屏幕-->
  <el-skeleton v-if="data.skeletonShow" :rows="35" animated />
  <!-- 用户数据列表-->
  <div v-else style="margin-left: 10px">
    <el-table :data="data.tableData" empty-text="暂无数据" stripe style="width: 100%" tabindex="index"  >
      <el-table-column fixed label="ID" prop="indexId" width="50"  />
      <el-table-column label="Openid" prop="openid" width="350" />
      <el-table-column label="用户昵称" prop="username" width="200" />
      <el-table-column label="性别" property="sex" width="100" />
      <el-table-column label="手机号" prop="telephon" width="200" />
      <el-table-column label="QQ邮箱" prop="qqmailbox" width="200" />
      <el-table-column label="是否展示官网" prop="purview" width="150" />
      <el-table-column label="居住地址" prop="address" width="250" />
      <el-table-column label="详细地址" prop="detailedaddress" width="350" />
      <el-table-column label="个人简介" prop="lntroduction" width="200" />
      <el-table-column label="备注" prop="remarks" width="200" />
      <el-table-column fixed="right" label="操作" width="140">
        <template  #default="scope">
          <div class="btn-right-table">
            <el-button  size="small" type="danger" @click="tableAddClick()">新增</el-button>
            <el-button  selection-change="" size="small" type="success" @click="tableTrueClick(scope.row)">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!--    分页-->
    <div style="width: 100%; display: flex;justify-content: flex-end;margin-top: 5px;margin-bottom: 5px">

      <el-pagination :total="data.count*10" background layout="prev, pager, next" />
    </div>
  </div>
  <!--修改信息模态-->
  <el-dialog v-model="data.dialogTabShow" draggable title="修改用户信息" width="700">
    <!-- 修改信息表单-->
    <el-form
        ref="form"
        :model="data.dialogForm"
        label-position="top"
        label-width="auto"
    >
      <!--头像和手机号码-->
      <el-form-item  >
        <div class="username-img">
          <el-image :src="data.dialogForm.headimage" class="form-image-hand" />
          <span>{{data.dialogForm.telephon}}</span>
          <el-icon  style="color: #3274d7;margin-left: 5px" v-if="data.dialogForm.sex=='男'"><Female /></el-icon>
          <el-icon style="color:palevioletred;margin-left: 5px" v-if="data.dialogForm.sex=='女'"><Male /></el-icon>
        </div>
      </el-form-item>

      <!--性别和是否展示开发人员-->
      <el-form-item >
        <el-radio-group v-model="data.dialogForm.sex">
          <el-radio label="男" >男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
        <el-tooltip :content="'是否展示开发人员: ' + data.switchValue" placement="top">
          <el-switch
              v-model="data.switchValue"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;margin-left: 20px"
              active-value="是"
              inactive-value="否"
          />
        </el-tooltip>
      </el-form-item>

     <!--昵称和邮箱-->
      <el-form-item >
        <div class="input-telephon-qqmailbox">
          <el-input placeholder="手机号" v-model="data.dialogForm.username"  />
          <el-input placeholder="QQ邮箱" v-model="data.dialogForm.qqmailbox"  />
        </div>
      </el-form-item>

      <!--用户权限-->
      <el-form-item label="用户权限">
        <el-checkbox style="margin-top: 10px" v-for="item in data.Privileges" :true-label="item.permission"  v-model="item.slected"  :label="item.name" border />
      </el-form-item>

      <!--现居住地址-->
      <el-form-item label="现居住地址" >
        <div class="input-telephon-qqmailbox">
          <el-input placeholder="现居住地址" :rows="1" type="textarea" v-model="data.dialogForm.address" style="width: 50%;" />
          <el-radio-group v-model="data.radioPassword" >
            <el-radio-button label="重置密码"  style="margin-right: -40px"/>
            <el-radio-button label="不重置"  />
          </el-radio-group>
        </div>
      </el-form-item>

      <!--详细地址-->
      <el-form-item label="详细地址">
          <el-input placeholder="详细地址" :rows="1" type="textarea" v-model="data.dialogForm.detailedaddress"  />
      </el-form-item>

      <!--用户简介-->
        <el-form-item label="用户简介">
          <el-input placeholder="用户简介" :rows="1" type="textarea" v-model="data.dialogForm.lntroduction"  />
      </el-form-item>

      <!--备注-->
      <el-form-item label="备注">
        <el-input placeholder="备注" :rows="1" type="textarea" v-model="data.dialogForm.remarks"  />
      </el-form-item>

    </el-form>
    <!-- 提交信息和取消按钮-->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.dialogTabShow = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {selUserPage,selsPrivileges,setUpdataUser} from "../request/request.js"
import {ElNotification} from "element-plus";
import {Decrypt, Encrypt} from "../config/secret.js";
import {AdressTrans} from "../config/mapTrans.js"

const data=ref({
  tableData:[],
  count:'',//分页数量
  skeletonShow:true,//
  dialogTabShow:false,//新增
  size:'default',//修改模态尺寸
  dialogForm:{
      username:'',
      headimage:'',
      qqmailbox:'',
      telephon:'',
      address:'',
      detailedaddress:'',
      lntroduction:'',
      remarks:'',
      sex:'',
  },//修改数据接收
  Privileges:[],//权限
  switchValue:"否",//是否展示开发人与
  radioPassword:"不重置",//是否重置密码
});//数据源


onMounted(()=>{
  selUserPageFun();
  selsPrivileges().then((res)=>{
    data.value.Privileges=res.data
  });//查询用户权限


})


/**
 * @param （点击修改展开模态）
 */
const tableTrueClick=(e:any)=>{
  // @ts-ignore
    data.value.dialogForm='';
    data.value.dialogForm=e;//传值
  //console.log(e)
    data.value.dialogTabShow=true;//展开卡片
    data.value.radioPassword="不重置"//设置初始值
    data.value.Privileges.forEach(item=>{item.slected=null})//设置初始值
  // @ts-ignore
    if (data.value.dialogForm.purview==1){data.value.switchValue="是"}else {data.value.switchValue="否"}//设置初始值
    let res=Decrypt(e.permissions).split(",")//获取权限
    res.forEach(item=>{data.value.Privileges.forEach((item2)=>{if (item==item2.permission){item2.slected=item2.permission}})
  })
}

/**
 * @param （分页查询用户信息）
 */
const selUserPageFun=()=>{
  selUserPage({
    remarks:1,
    lntroduction:15
  }).then((res)=>{data.value.skeletonShow=false;if (res.code==200){
    res.data[0].forEach((item,index)=>{item.indexId=index+1;});
    data.value.tableData=res.data[0];
    data.value.count=String(Math.ceil(res.data[1]/15));
  }else {
    ElNotification({title: 'Error', message: '查询信息错误！', type: 'error'});
  }});
}

/**
 * @param （点击新增模态）
 */
const tableAddClick = () => {
  console.log('click')
}
/**
 * @param （修改用户信息）
 */
const submitForm=async()=>{
  let password=null,purview=0,permission=[]
  data.value.Privileges.forEach((item)=>{
    if (item.slected==item.permission){permission.push(item.slected)}
  })
  if (data.value.radioPassword=="重置密码"){password=123456};
  if (data.value.switchValue=="是"){purview=1};
  // @ts-ignore
  let AdressTransRes=await AdressTrans(data.value.dialogForm.address);
  let VarData={
    // @ts-ignore
    openid:data.value.dialogForm.openid ,//openid
    address:data.value.dialogForm.address ,//地址
    detailedaddress:data.value.dialogForm.detailedaddress ,//详细地址
    username:data.value.dialogForm.username  ,//用户昵称
    sex :data.value.dialogForm.sex ,//用户性别
    password:password  ,//用户密码
    headimage:data.value.dialogForm.headimage ,//头像
    qqmailbox:data.value.dialogForm.qqmailbox ,//QQ邮箱
    remarks:data.value.dialogForm.remarks ,//备注
    lntroduction:data.value.dialogForm.lntroduction ,//简介
    purview:purview ,//是否显示开发人员
    coordinate:AdressTransRes.location[0],
    permissions: Encrypt(permission.toString()) //权限
  };//提交参数
  setUpdataUser(VarData).then((res)=>{
   if (res.code==200){
     ElNotification({title: 'Success', message: '修改成功', type: 'success'})
   }else {
     ElNotification({title: 'Error', message: '修改失败', type: 'error'})
   }
  })
}


</script>

<style scoped>
.btn-right-table{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-image-hand{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;

}
.username-img{
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 26px;
}
.username-img span{
  margin-left: 20px;
}
.input-telephon-qqmailbox{
  display: flex;
  width: 100%;
}
.input-telephon-qqmailbox :nth-child(2){
  margin-left: 20px;
}
</style>
